<template>
  <div class="home">
    <el-space direction="vertical" :fill="true" size="large" wrap style="width: 100%;">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card card1" shadow="never">
            <div class="title">订单总额</div>
            <div class="text numbers">{{ summaryData.orderTotalAmount }}</div>
            <el-divider />
            <div class="increase">
              <div class="today">
                <span class="label">今日新增</span> <span class="value">{{ summaryData.orderTodayAmount }}</span>
              </div>
              <div class="count">
                <span class="label">订单总数</span> <span class="value">{{ summaryData.orderTotalCount }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card card2" shadow="never">
            <div class="title">电费总额</div>
            <div class="text numbers">{{ summaryData.orderElecAmount }}</div>
            <el-divider />
            <div class="increase">
              <div class="today">
                <span class="label">今日新增</span> <span class="value">{{ summaryData.orderTodayElecAmount }}</span>
              </div>
              <div class="count">

              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card card3" shadow="never">
            <div class="title">服务费总额</div>
            <div class="text numbers">{{ summaryData.orderServiceAmount }}</div>
            <el-divider />
            <div class="increase">
              <div class="today">
                <span class="label">今日新增</span> <span class="value">{{ summaryData.orderTodayServiceAmount }}</span>
              </div>
              <div class="count">

              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card card4" shadow="never">
            <div class="title">充值总额</div>
            <div class="text numbers">{{ summaryData.topupAmount }}</div>
            <el-divider />
            <div class="increase">
              <div class="today">
                <span class="label">今日新增</span> <span class="value">{{ summaryData.topupTodayAmount }}</span>
              </div>
              <div class="count">

              </div>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card1" shadow="never">
            <template #header>
              <div class="card-header">
                <h3>充电桩分类统计</h3>
              </div>
            </template>
            <div class="chart-device-num" ref="chartDeviceNumStat"></div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card1" shadow="never">
            <template #header>
              <div class="card-header">
                <h3>充电桩状态统计</h3>
              </div>
            </template>
            <el-row class="chart-device">
              <el-col :span="6">
                <div class="chart-device-idle" ref="chartDeviceIdle"></div>
                <div class="dev-sub">空闲</div>
              </el-col>
              <el-col :span="6">
                <div class="chart-device-fail" ref="chartDeviceFail"></div>
                <div class="dev-sub">故障</div>
              </el-col>
              <el-col :span="6">
                <div class="chart-device-offline" ref="chartDeviceOffline"></div>
                <div class="dev-sub">离线</div>
              </el-col>
              <el-col :span="6">
                <div class="chart-device-unknown" ref="chartDeviceUnknown"></div>
                <div class="dev-sub">未知</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="never">
            <template #header>
              <el-row class="card-header">
                <el-col :span="4" class="card-header-left"><h3>销售统计</h3></el-col>
                <el-col :span="20" class="card-header-right">



                </el-col>
              </el-row>
            </template>
            <div class="chart-msg-stat" ref="chartMsgStat"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-space>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent, TitleComponent, ToolboxComponent, GridComponent } from 'echarts/components'
import { PieChart, LineChart, GaugeChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { analyzeSummary, analyzeChargeCategory, analyzeChargeState, analyzeSaleStatistics} from '@/api/business/analyze'

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  UniversalTransition,
  GaugeChart,
])
const chartDeviceNumStat = ref()
const chartDeviceIdle = ref()
const chartDeviceOffline = ref()
const chartDeviceFail = ref()
const chartDeviceUnknown = ref()
const chartMsgStat = ref()

const summaryData = ref<any>({
  orderTotalAmount: 0,
  orderTotalCount: 0,

  orderElecAmount: 0,
  orderServiceAmount: 0,
  orderParkAmount: 0,

  orderTodayAmount: 0,
  orderTodayElecAmount: 0,
  orderTodayServiceAmount: 0,
  orderTodayParkAmount: 0,

  topupAmount: 0,
  topupTodayAmount: 0,
})

onMounted(() => {
  loadSummaryData()
  loadDeviceCategoryData()
  loadDeviceStateData()
  loadSaleStatisticsData()
})
const loadSummaryData = (()=>{
  analyzeSummary({}).then((res) => {
    summaryData.value = res.data
  })
})

const loadDeviceCategoryData = (()=> {
  analyzeChargeCategory({}).then((res) => {
    echarts.init(chartDeviceNumStat.value).setOption({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        right: '10%',
        align: 'left',
        orient: 'vertical',
        icon: 'circle',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['50%', '80%'],
          avoidLabelOverlap: false,
          center: ['30%', '50%'],
          label: {
            show: true,
            position: 'outside',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: true,
          },
          data: res.data.chargerCategory,
        },
      ],
    })
  })
})

const loadDeviceStateData = (()=>{
  analyzeChargeState({}).then((res) => {
    echarts.init(chartDeviceIdle.value).setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 360,
          endAngle: 0,
          progress: {
            show: true,
            width: 12,
            itemStyle: {
              color: '#00dd99',
            },
          },
          axisLine: {
            lineStyle: {
              width: 12,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          anchor: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '0'],
            formatter: function (value) {
              return value + '个'
            },
          },
          data: [
            {
              value: res.data.chargerIdleTotal,
            },
          ],
        },
      ],
    })

    echarts.init(chartDeviceOffline.value).setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 360,
          endAngle: 0,
          progress: {
            show: true,
            width: 12,
            itemStyle: {
              color: '#ff5500',
            },
          },
          axisLine: {
            lineStyle: {
              width: 12,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          anchor: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '0'],
            formatter: function (value) {
              return value + '个'
            },
          },
          data: [
            {
              value: res.data.chargerOfflineTotal,
            },
          ],
        },
      ],
    })

    echarts.init(chartDeviceFail.value).setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 360,
          endAngle: 0,
          progress: {
            show: true,
            width: 12,
            itemStyle: {
              color: 'gey',
            },
          },
          axisLine: {
            lineStyle: {
              width: 12,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          anchor: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '0'],
            formatter: function (value) {
              return value + '个'
            },
          },
          data: [
            {
              value: res.data.chargerFailTotal,
            },
          ],
        },
      ],
    })

    echarts.init(chartDeviceUnknown.value).setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 360,
          endAngle: 0,
          progress: {
            show: true,
            width: 12,
            itemStyle: {
              color: '#0055bb',
            },
          },
          axisLine: {
            lineStyle: {
              width: 12,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          anchor: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '0'],
            formatter: function (value) {
              return value + '个'
            },
          },
          data: [
            {
              value: res.data.chargerUnknownTotal,
            },
          ],
        },
      ],
    })
  })
})

const loadSaleStatisticsData = (()=>{
  analyzeSaleStatistics({}).then((res) => {
    let xdata: string[] = []
    let upData: string[] = []

    res.data.months.forEach(msg => {
      xdata.push(msg.name )
      upData.push(msg.value)
    })

    echarts.init(chartMsgStat.value).setOption({
      title: {},
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['充电金额'],
        textStyle: {
          fontWeight: 'bolder',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xdata,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '充电金额',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'outside',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: true,
          },
          data: upData,
        },
      ],
    })

  })
})


</script>

<style scoped lang="scss">
.home {
  blockquote {

    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Microsoft YaHei';
  font-size: 13px;
  color: #676a6c;
  //overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .box-card {
    background-position-x: right;
    background-repeat: no-repeat;

    :first-child {
      padding: 0px 8px 0px !important;
      min-height: 0px;
    }
    .title {
      font-size: 18px;
      line-height: 50px;
      font-weight: bold;
      color: #999;
    }
    .numbers {
      font-size: 32px;
      font-weight: bold;
      padding-left: 10px;
    }
    .increase {
      padding: 0 20px 15px 0px;
      font-weight: bold;
      color: #999;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .today {

        .label {
        }
        .value {
          font-size: 20px;
          color: #00dd00;
        }

      }
      .count {

        .label {

        }
        .value {
          font-size: 20px;
          color: #ff0000;
          text-align: right;
        }


      }

    }
  }

  .box-card.card1 {
    background-image: url('@/assets/images/index/card1.png');
  }

  .box-card.card2 {
    background-image: url('@/assets/images/index/card2.png');
  }

  .box-card.card3 {
    background-image: url('@/assets/images/index/card3.png');
  }

  .box-card.card4 {
    background-image: url('@/assets/images/index/card4.png');
  }

  .box-card1 {

    padding: 0px 8px 0px !important;



  }

  .chart-device{
    padding-top:20px;
    height: 200px;
  }

  .chart-device-num {
    height: 200px;
  }
  .chart-device-idle,
  .chart-device-offline,
  .chart-device-fail,
  .chart-device-unknown{
    height: 120px;

  }
  .chart-msg-stat {
    height: 450px;
  }

  .dev-sub {
    height: 80px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }

  .dev-sub.online {
    p {
      color: #00dd99;
    }
  }
}

.card-header{
  .card-header-right{
    text-align: right;

    .filter{
      display: flex;

    }
  }
}
</style>
